<template>
  <!--  <div id="bussiness">-->
  <el-main>

    <el-row :gutter="20">
      <el-col :span="5" class="b_left">
        <div></div>
      </el-col>
      <el-col :span="13" class="b_middle">
        <div>
          <el-row class="cube">
            <el-col :span="8">
              <div class="cube-left">
                <div>
                  <p>电子底账</p>
                  <p>1000T</p>
                </div>

                <img src="../../assets/img/b-img/cube_left.png" alt="">
              </div>
            </el-col>
            <el-col :span="8">
              <div class="cube-mid">
                <img src="../../assets/img/b-img/cube_mid.png" alt="">
              </div>
            </el-col>
            <el-col :span="8">
              <div class="cube-right">
                <img src="../../assets/img/b-img/cube_right.png" alt="">
              </div>
            </el-col>
          </el-row>
          <el-row class="hexagon">
            <el-col :span="7">
              <div class="hexagon1">
                <img src="../../assets/img/b-img/hexagon1.png" alt="">
              </div>
              <div class="hexagon3">
                <img src="../../assets/img/b-img/hexagon3.png" alt="">
              </div>
            </el-col>
            <el-col :span="10">
              <div class="hexagon0">
                <img src="../../assets/img/b-img/hexagon0.png" alt="">
              </div>
            </el-col>
            <el-col :span="7">
              <div class="hexagon2">
                <img src="../../assets/img/b-img/hexagon2.png" alt="">
              </div>
              <div class="hexagon4">
                <img src="../../assets/img/b-img/hexagon4.png" alt="">
              </div>
            </el-col>
          </el-row>
          <el-row class="triangle">
            <el-col :span="6">
              <div class="triangle1">
                <img src="../../assets/img/b-img/triangle1.png" alt="">
              </div>
            </el-col>
            <el-col :span="6">
              <div class="triangle2">
                <img src="../../assets/img/b-img/triangle2.png" alt="">
              </div>
            </el-col>
            <el-col :span="6">
              <div class="triangle3">
                <img src="../../assets/img/b-img/triangle3.png" alt="">
              </div>
            </el-col>
            <el-col :span="6">
              <div class="triangle4">
                <img src="../../assets/img/b-img/triangle4.png" alt="">
              </div>
            </el-col>
          </el-row>


        </div>
      </el-col>
      <el-col :span="5" class="b_right">
        <div></div>
      </el-col>
    </el-row>

  </el-main>
  <!--  </div>-->

</template>

<script>
  export default {
    name: "Bussiness",
    data(){
      return {
        // 上层数据
        cubeDataLeft:'',
        cubeDataMid:'',
        cubeDataRight:'',

        // 中间数据
        hexagonData0:'',
        hexagonData1:'',
        hexagonData2:'',
        hexagonData3:'',
        hexagonData4:'',

        // 下层数据
        triangleData1:'',
        triangleData2:'',
        triangleData3:'',
        triangleData4:'',
      }
    }
  }
</script>

<style scoped>
  #bussiness {
    width: 50%;
    height: 100%;
  }

  .el-main {
    width: 50%;
    padding: 5px;
    height: 100%;
  }

  .el-row {
    width: 100%;
    height: 100%;
    margin-left: 0 !important;
  }

  .el-col {
    height: 90%;
    position: relative;
    top: 9%;
    /*margin-top: 15%;*/
    /*padding-top: 5%;*/
  }

  .b_right {
    margin-left: 2.3%;
    /*background: rgba(0, 17, 44, 0.5);*/
    /*background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 34, 66, 0.8)), to(rgba(0, 193, 222, 0.3))) !important;*/
  }

  .b_left {
    height: 91%;
    top: 8%;
    margin-left: 1%;
    /*background: rgba(0, 17, 44, 0.5);*/
    /*background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 34, 66, 0.8)), to(rgba(0, 193, 222, 0.3))) !important;*/

  }

  /*图片布局*/
  img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }

  /*上层立方体*/
  .cube {
    position: absolute;
    height: 30%;
    color: #ffffff;
  }

  .cube-mid {
    position: relative;
    top: 45%;
    width: 115%;
  }

  .cube-left {
    position: relative;
    left: 30%;
  }

  .cube-right {
    position: relative;
    right: 30%;
  }

  /*中间层六边形 */
  .hexagon {
    position: absolute;
    top: 30%;
    height: 50%;
  }

  .hexagon0 {
    height: 90%;
    width: 150%;
    position: relative;
    right: 24%;
  }

  .hexagon0 img {
    height: 100%;
    width: 100%;
  }

  .hexagon1 {
    width: 150%;
    height: 70%;
    position: relative;
    bottom: 19%;
    right: 15%;
  }

  .hexagon1 img {
    height: 100%;
    width: 100%;
  }

  .hexagon2 {
    width: 150%;
    height: 70%;
    position: relative;
    bottom: 19%;
    right: 32%;
  }

  .hexagon2 img {
    height: 100%;
    width: 100%;
  }

  .hexagon3 {
    width: 160%;
    height: 70%;
    position: relative;
    bottom: 26%;
    right: 17%;
  }

  .hexagon3 img {
    width: 100%;
    height: 100%;
  }

  .hexagon4 {
    width: 160%;
    height: 70%;
    position: relative;
    bottom: 26%;
    right: 41%;
  }

  .hexagon4 img {
    width: 100%;
    height: 100%;
  }

  /*底层锥形*/
  .triangle {
    position: absolute;
    height: 15%;
    bottom: 0;
  }

  .triangle1 {
    width: 55%;
    height: 65%;
    position: relative;
    top: 5%;
    left: 76%;
  }

  .triangle1 img {
    height: 100%;
    width: 100%;
  }

  .triangle2 {
    width: 55%;
    height: 60%;
    position: relative;
    bottom: 50%;
    left: 40%;
  }

  .triangle2 img {
    height: 100%;
    width: 100%;

  }

  .triangle3 {
    width: 80%;
    height: 75%;
    position: relative;
    top: 22%;
  }

  .triangle3 img {
    height: 100%;
    width: 100%;

  }
  .triangle4 {
    width: 55%;
    height: 55%;
    position: relative;

  }

  .triangle4 img {
    height: 100%;
    width: 100%;

  }


</style>